import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 要设置的全局访问的state对象
const state = {
  footer: true,
  num: 0
  // 要设置的初始属性值
}

/*
  可以用this.$store.state.show或this.$store.state.num
  在任何一个组件里面获取show和num定义的值了
  但这不是理想的获取方式；vuex官方API提供了一个getters
  和vue计算属性computed一样，来实时监听state值的变化(最新状态)，并把它也仍进Vuex.Store里面
 */
const getters = {
  getShow () {
    return state.footer
  },
  getNum () {
    return state.num
  }
}
/*
  光有定义的state的初始值，不改变它不是我们想要的需求
  接下来要说的就是mutations了，mutattions也是一个对象
  这个对象里面可以放改变state的初始值的方法
  具体的用法就是给里面的方法传入参数state或额外的参数
  然后利用vue的双向数据驱动进行值的改变
  同样的定义好之后也把这个mutations扔进Vuex.Store里面，如下：
 */
const mutations = {
  // 自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
  show (state) {
    console.log('执行了 store/index.js 的 mutations.show()')
    state.footer = true
  },
  hide (state) {
    console.log('执行了 store/index.js 的 mutations.hide()')
    state.footer = false
  },
  newNum (state, sum) {
    state.num += sum
  }
}

/*
  这时候你完全可以用 this.$store.commit('show') 或 this.$store.commit('hide') 以及 this.$store.commit('newNum',6)
  在别的组件里面进行改变showfooter和changebleNum的值了
  但这不是理想的改变值的方式；因为在 Vuex 中，mutations里面的方法 都是同步事务
  意思就是说：比如这里的一个this.$store.commit('newNum',sum)方法
  两个组件里用执行得到的值，每次都是一样的，这样肯定不是理想的需求

  好在vuex官方API还提供了一个actions
  这个actions也是个对象变量，最大的作用就是里面的Action方法 可以包含任意异步操作
  这里面的方法是用来异步触发mutations里面的方法
  actions里面自定义的函数接收一个context参数和要变化的形参
  context与store实例具有相同的方法和属性
  所以它可以执行context.commit(' '),然后也不要忘了把它也扔进Vuex.Store里面：
 */
const actions = {
  // 自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
  showFooter (context) {
    console.log('执行了 store/index.js 的actions.showFooter()')
    context.commit('show')
  },
  hideFooter (context) {
    console.log('执行了 store/index.js 的actions.hideFooter()')
    context.commit('hide')
  },
  getNewNum (context, num) {
    context.commit('newNum', num)
  }
}

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

// 将store暴露给外部调用
export default store
